<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础信息</span>
        </div>
      </template>
      <!-- <p class="text item">员工姓名:Allan</p>
      <p class="text item">邮箱:al@al.com</p>
      <p class="text item">所属部门：商用软件事业部</p>
      <p class="text item">职位:高级软件工程师</p>
      <p class="text item">性别:</p>
      <p class="text item">入职日期:</p>
      <p class="text item">生日:</p>
      <p class="text item">婚姻状态:</p>
      <p class="text item">初次参加工作时间:</p> -->
      <div class="first">
        <div class="information">
          <el-form label-width="200px">
            <el-form-item label="职位编号:">
              {{ onePos?.posId }}
            </el-form-item>
            <el-form-item label="职位名称:">
              {{ onePos?.posName }}
            </el-form-item>
            <el-form-item label="职位级别:">
              {{ onePos?.level }}
            </el-form-item>
            <el-form-item label="状态:">
              {{ onePos?.status }}
            </el-form-item>
        
          </el-form>
        </div>
        
      </div>




    </el-card>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>职位员工信息</span>
        </div>
      </template>
      <el-table :data="PosStaffList" border>
        <el-table-column prop="empId" label="编号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="deptName" label="部门" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="age" label="年龄" />
      </el-table>
    </el-card>
    
  </div>

</template>
<script setup lang="ts">
import { getOnePos,  getPosStaffList } from '@/api/pos';
import type { Pos, PosOfStaff } from '@/model';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route=useRoute();
const pid= parseInt(route.query.id as string);

const onePos=ref<Pos>();
const getOnePosFn=async ()=>{
  const res = await getOnePos(pid);
  // console.log(res);
  onePos.value=res.data;

};
getOnePosFn();

const PosStaffList = ref<PosOfStaff[]>([]);
const getPosStaffListFn = async () =>{
  const res = await getPosStaffList(pid);
  console.log(888,res);
  PosStaffList.value=res.data
}
getPosStaffListFn();

// const deptData = [
//   {
//     staffNum: '001',
//     staffName: '张三',
//     position: '前端开发工程师',
//     sex: '男',
//     age: 28,
//   },
//   {
//     staffNum: '002',
//     staffName: '李四',
//     position: '后端开发工程师',
//     sex: '女',
//     age: 30,
//   },
//   // 更多数据...
//   {
//     staffNum: '003',
//     staffName:
//       '王五',
//     position: '产品经理',
//     sex: '男',
//     age: 32,
//   }
  
// ]
</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-form-item__label {
  position: relative;
  /* 设置相对定位作为星号的定位基准 */
  text-align: justify;
  text-align-last: justify;
  /* 确保最后一行也两端对齐 */
  padding-left: 10px;
  /* 为星号预留空间 */
}

.el-form-item__label:before {
  content: '*';
  color: red;
  position: absolute;
  left: 0;
  /* 星号定位到标签最左侧 */
  top: 0;
  /* 调整垂直位置以适应行高 */
}
.first{
  display: flex;
  justify-content: space-between;
}
</style>
